<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>hello react!</title>
	<script src="build/react.js"></script>
	<script src="build/JSXTransformer.js"></script>
</head>
<body>
	<div id="example"></div>
	<div id="like"></div>
	<script type="text/jsx">
		var Helloworld=React.createClass({
			render:function(){
				return (
					<p>
					Hello, <input type="text" placeholder="your name here" />!
					It is {this.props.date.toTimeString()}
					</p>
				)
			}
		});
		
		setInterval(function(){
			React.render(
				<Helloworld date={new Date()} />,
				document.getElementById('example')
			)
		},500);
	</script>
	<script type="text/jsx">
		var LikeButton=React.createClass({
			getInitialState:function(){
				return {liked:false};
			},
			handleClick:function(e){
				console.dir(this);
				this.setState({liked:!this.state.liked});
			},
			render:function(){
				var text=this.state.liked?'like':'haven\'t liked';
				return (
					<p onClick={this.handleClick}>
						You {text} this.Click to toggle.
					</p>
				);
			}
		});
		
		React.render(<LikeButton />,document.getElementById('like'));
	</script>
</body>
</html>